@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,700);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #151515;
font-family: 'Poppins', sans-serif;
font-weight: 700;
text-transform: uppercase;
color: #fff;
height: 100vh;
display: grid;
place-items: center;
}
label {
display: block;
line-height: 40px;
}
.input__control {
appearance: none;
position: relative;
inset: 13.33333px 0 0;
height: 40px;
width: 40px;
transition: all 0.15s ease-out 0s;
background: #fff;
margin-right: 0.5rem;
border-radius: 50%;
cursor: pointer;
}
.input__control:hover {
background: #9faab7;
}
.input__control:checked {
background: #40e0d0;
}
.input__control.radio::after {
border-radius: 50%;
}
.input__control:checked::before {
width: 40px;
height: 40px;
content: '\f00c';
font-size: 25px;
font-weight: bold;
position: absolute;
display: grid;
place-items: center;
font-family: 'Font Awesome 5 Free';
}
.input__control:checked::after {
animation: click-wave 0.65s;
background: #40e0d0;
content: '';
display: block;
position: relative;
z-index: 100;
}
@keyframes click-wave {
0% {
height: 40px;
width: 40px;
border-radius: 50%;
opacity: 0.35;
position: relative;
}
100% {
height: 200px;
width: 200px;
border-radius: 50%;
margin-left: -80px;
margin-top: -80px;
opacity: 0;
}
}